<template>
  <el-container>
    <el-aside width="10%"></el-aside>
    <el-main>
      <el-row :gutter="25">
        <el-col :span="6">
          <el-card shadow="hover">
            <template #header>
              <div style="display: flex;justify-content: center;">
                <el-image
                    :src="userinfo.avatarurl"
                    :fit="'fill'"
                />
              </div>
            </template>
            <div style="display: flex;justify-content: center;">
              <span>{{userinfo.nickname}}</span>

            </div>

            <template #footer>
<!--              <div class="breadcrumb">-->
                <div style="display: flex;justify-content: center;">
                  <!--                <el-button type="primary" round>更换头像</el-button>-->
                  <span>{{userinfo.signature}}</span>
                </div>
<!--              </div>-->

            </template>
          </el-card>
        </el-col>

        <el-col :span="18">
          <el-card>
            <el-tabs type="border-card" v-model="activeName" @tab-change="handleTabChange">
<!--              <el-tab-pane label="文章" name="article">-->
<!--                <el-table stripe :data="articlelist" max-height="700">-->
<!--                  <el-table-column label="标题">-->
<!--                    <template #default="scope">-->
<!--                      <el-link type="primary">{{scope.row.name}}</el-link>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="分类">-->
<!--                    <template #default="scope">-->
<!--                      <el-tag v-if="scope.row.category === 1" type="primary" size="large">日常</el-tag>-->
<!--                      <el-tag v-else-if="scope.row.category === 2" type="success" size="large">代码</el-tag>-->
<!--                      <el-tag v-else-if="scope.row.category === 3" type="warning" size="large">求助</el-tag>-->
<!--                    </template>-->
<!--                  </el-table-column>-->
<!--                  <el-table-column label="时间" prop="date">-->

<!--                  </el-table-column>-->
<!--                  <el-table-column label="点赞数" prop="likenumber">-->

<!--                  </el-table-column>-->
<!--                </el-table>-->

<!--              </el-tab-pane>-->
              <el-tab-pane label="收藏" name="favorite">

                <el-table stripe :data="favoritelist" max-height="700">
                  <el-table-column label="标题">
                    <template #default="scope">
                      <el-link type="primary" @click="toArticleDetail(scope.row.articleid)">{{scope.row.title}}</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column label="作者" prop="nickname">

                  </el-table-column>
                  <el-table-column label="分类">
                    <template #default="scope">
                      <el-tag v-if="scope.row.category === 1" type="primary" size="large">技术分享</el-tag>
                      <el-tag v-else-if="scope.row.category === 2" type="success" size="large">学习笔记</el-tag>
                      <el-tag v-else-if="scope.row.category === 3" type="warning" size="large">随心所写</el-tag>
                      <el-tag v-else-if="scope.row.category === 4" type="danger" size="large">剑指Offer</el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="收藏时间">
                    <template #default="scope">
                      <span>{{formatDate(scope.row.createtime)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="danger" :icon="Delete" circle @click="deleteFavorite(scope.$index,scope.row.id)"/>
                    </template>
                  </el-table-column>
                </el-table>

              </el-tab-pane>
              <el-tab-pane label="评论" name="comment">

                <el-table stripe :data="commentlist" max-height="700">
                  <el-table-column label="文章">
                    <template #default="scope">
                      <el-link type="primary" @click="toArticleDetail(scope.row.articleid)">{{scope.row.title}}</el-link>
                    </template>
                  </el-table-column>
                  <el-table-column label="评论内容">
                    <template #default="scope">
                      <el-popover
                          placement="top-start"
                          title="Content"
                          :width="200"
                          trigger="click"
                          :content="`${scope.row.content}`"
                      >
                        <template #reference>
                          <el-button type="primary">查看评论</el-button>
                        </template>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="发表时间">
                    <template #default="scope">
                      <span>{{formatDate(scope.row.createtime)}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作">
                    <template #default="scope">
                      <el-button type="danger" :icon="Delete" circle @click="deleteComment(scope.$index,scope.row.id)" />
                    </template>
                  </el-table-column>
                </el-table>

              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
    <el-aside width="10%"></el-aside>
  </el-container>

</template>

<script setup>
import {ref} from "vue"
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
import {ElMessage,ElMessageBox} from "element-plus"

import {useRouter} from "vue-router"

import useUserInfoStore from '/src/stores/userInfo.js'

import {favoriteListService,favoriteDeleteService} from '/src/api/Favorite.js'
import {usercommentListService,commentDeleteService} from '/src/api/Comment.js'
import {deleteCommentService} from "../../api/Admin.js";


const activeName = ref('')
//获取用户信息
const userInfoStore = useUserInfoStore()

const userinfo = ref({...userInfoStore.info})

const commentlist = ref([])

const favoritelist = ref([])

const router = useRouter()

const toArticleDetail = (id) => {

  router.push('/details/'+id)

}

//获取收藏列表
const getFavoriteList = async () => {

  let result = await favoriteListService()
  favoritelist.value = result.data
  
}

//获取评论列表
const getCommentList = async () => {

  let result = await usercommentListService()
  commentlist.value = result.data

}

// 删除收藏
const deleteFavorite = (index,id) => {

  ElMessageBox.confirm(
      '您确定要删除这个收藏吗?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {

        let result = await favoriteDeleteService(id)
        //后台删除成功,前端删除
        favoritelist.value.splice(index,1)
        ElMessage.success('删除成功!')
      })
      .catch(() => {
        ElMessage.warning('取消删除!')
      })

}

//删除评论
const deleteComment = (index,id) => {

  ElMessageBox.confirm(
      '您确定要删除这个评论吗?',
      'Warning',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {

        let result = await commentDeleteService(id)
        //后台删除成功,前端删除
        commentlist.value.splice(index,1)
        ElMessage.success('删除成功!')

      })
      .catch(() => {
        ElMessage.warning('取消删除!')
      })

}

//tab切换函数
const handleTabChange = (newTab) => {
  if(newTab === 'favorite'){
    getFavoriteList()
  }
  if(newTab === 'comment'){
    getCommentList()
  }
}

//日期格式转换
const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以加1
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}



</script>

<style scoped>

/* HTML: <div class="breadcrumb"></div> */
.breadcrumb {
  --s: 20px; /* control the shape */

  line-height: 1.8; /* control the height */
  padding-inline: calc(var(--s) + .3em);
  clip-path: polygon(0 0,calc(100% - var(--s)) 0,100% 50%,calc(100% - var(--s)) 100%,0 100%,var(--s) 50%);
  background:#409eff;
  width: fit-content;
}



</style>